<template>
  <div class="abnormal">
        <ul class="abnormal-title">
            <li class="tab-title" v-for="item of titleList" :key="item.id">{{ item.titlename }}</li>
        </ul>

        <ul class="abnormal-table" v-for="item of tableList">
           <li class="tab-border" v-for="item of borderList"></li>
        </ul>  
        
        <div class="abnormal-data-wrapper">
          <ul class="abnormal-data" v-for="item of list" :key="item.id">
               <li class="tab-content" >{{item.machine}}</li>
               <li class="tab-content" >{{item.finishedcount}}</li>
          </ul>
        </div>
    
  </div>
</template>

<script>
export default {
  props:{
    list:Array
  },  
  data () {
    return {
        titleList:[
           {
            id:"0001",
            titlename:"机台"
           },
           {
            id:"0002",
            titlename:"时间"
           },
           {
            id:"0003",
            titlename:"操作人"
           },
           {
            id:"0004",
            titlename:"工步"
           },
           {
            id:"0005",
            titlename:"异常信息"
           }
        ],
        borderList:["1","2","3","4","5"],
        tableList:["1","2","3","4","5","6","7","8","9","10"]
        // list:[
       //      {
       //       id:"000001",
       //       machine:"33sss",
       //       finishedcount:"2018/0607"
       //      }

        // ]
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style  scoped>

.abnormal{
    width:620px;
    height:484px; 
    position:relative;
}

.abnormal-title{
    height:44px;
    border:1px solid #26aab7;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    box-sizing:border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
   
.tab-title{
    width:20%;
    height:44px;
    line-height:44px;
    text-align:center;
    border-right:1px solid #26aab7;
    box-sizing:border-box;
}

.tab-title:last-child{
    border:none;
}
.abnormal-table{
    width: 100%;
    height: 44px;
    border-left: 1px solid #26aab7;
    border-right: 1px solid #26aab7;
    border-bottom: 1px solid #26aab7;
    box-sizing:border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.abnormal-table li{
    height: 44px;
    line-height:44px;
    width: 20%;
    border-right: 1px solid #26aab7;
    box-sizing:border-box;
    text-align:center;
}
    
.abnormal-table  li:last-child{
    border:none;
}

.abnormal-table:nth-child(11){
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}


.tab-title{
    font-size:24px;
    color:#fff;
}

.tab-content{
    font-size:24px;
    color:#26aab7;
}


.abnormal-data-wrapper{
    width:100%;
    height:440px;
    overflow:hidden;
    position:absolute;
    top:44px;
}
.abnormal-data{
    width:100%;
    height:44px;
    box-sizing:border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.abnormal-data li{
    height: 44px;
    line-height:44px;
    width: 20%;
    box-sizing:border-box;
    text-align:center;
}

    
</style>